<!doctype html>
<html>

<head>
    <title>Netflix</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="google" value="notranslate"/>
    <link type="text/css" rel="stylesheet"
          href="https://codex.nflxext.com/%5E2.0.0/truthBundle/webui/0.0.1-shakti-css-386236be/css/css/pages%7CakiraClient.less/1/0WgfcYBKZXLU/none/true/none"/>
    <link rel="shortcut icon" href="https://assets.nflxext.com/us/ffe/siteui/common/icons/nficon2016.ico"/>
    <script src="https://assets.nflxext.com/en_us/ffe/player/html/cadmium-playercore-5.0007.712.011.js"
            id="player-core-js" async=""></script>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");

        *,
        *:before,
        *:after {
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }

        :root {
            --bg: #141414;
            --size: 50vmin;
            --height: var(--size);
            --width: calc(0.6875 * var(--size));
            --font-size: calc(0.74 * var(--size));
            --gap: calc(0.22 * var(--size));
        }

        body {
            background: var(--bg);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: start;
            font-family: 'Roboto', sans-serif;
        }

        .top-picks {
            max-width: 100%;
            padding: 0 2rem;
        }

        .top-picks__track {
            height: var(--height);
            margin: 0;
            padding: 0;
            display: flex;
            list-style-type: none;
            padding: 0 var(--gap);
            max-width: 100%;
            overflow-x: auto;
            overflow-y: visible;
            counter-reset: index;
            -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
        }

        .top-picks__title {
            color: #fff;
            font-size: clamp(1.2rem, 5vmin, 3rem);
            font-weight: 700;
        }

        .top-picks__item {
            overflow: hidden;
            width: calc(var(--width) + var(--gap));
            flex: 0 0 calc(var(--width) + var(--gap));
            position: relative;
            list-style: none;
            counter-increment: index;
            padding-left: var(--gap);
            scroll-snap-align: center;
        }

        .top-picks__item.item:hover img {
            filter: saturate(100%);
        }

        .top-picks__item .item__card {
            width: var(--width);
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: 2vmin;
            background: #242424;
            overflow-x: hidden;
        }

        .top-picks__item .item__card:after {
            position: absolute;
            content: '';
            bottom: 1rem;
            right: 1rem;
            height: 1.5rem;
            width: 1.5rem;
            background-image: url("https://assets.codepen.io/605876/avatar.png");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .top-picks__item .item__card img {
            position: absolute;
            height: 100%;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            transition: filter 0.2s;
            filter: saturate(50%);
        }

        .top-picks__item .item__card span {
            text-decoration: none;
            position: absolute;
            top: 2rem;
            right: 2rem;
            max-width: 50%;
            text-align: right;
            color: #fff;
            font-weight: bold;
            font-size: clamp(1rem, 2vmin, 2rem);
            text-shadow: 0.5vmin 0 2vmin var(--bg);
        }

        .top-picks__item:after {
            content: counter(index);
            position: absolute;
            color: var(--bg);
            font-size: var(--font-size);
            line-height: 0.7;
            bottom: 0;
            font-weight: bold;
            letter-spacing: -5vmin;
            left: 0;
            -webkit-text-stroke: 0.5vmin #fff;
            text-shadow: 1vmin 0 4vmin var(--bg);
            transform: translate(-14%, 0);
        }

    </style>
</head>

<body>

<div class="top-picks">
    <h1 class="top-picks__title">Top 10 in Jhey's Pens Today</h1>
    <ul class="top-picks__track">
        <li class="item top-picks__item"><a class="item__card" href="https://codepen.io/jh3y/pen/LYNZwGm"
                                            target="_blank" rel="noopener noreferrer"><img
                src="https://assets.codepen.io/605876/impossible-checkbox.png"/><span>Impossible Checkbox</span></a>
        </li>
        <li class="item top-picks__item"><a class="item__card" href="https://codepen.io/jh3y/pen/abzeaWJ"
                                            target="_blank" rel="noopener noreferrer"><img
                src="https://assets.codepen.io/605876/newtons-lightbulbs.png"/><span>Newton's Light Bulbs</span></a>
        </li>
        <li class="item top-picks__item"><a class="item__card" href="https://codepen.io/jh3y/pen/BVaGKP" target="_blank"
                                            rel="noopener noreferrer"><img
                src="https://assets.codepen.io/605876/css-tic-tac-toe.png"/><span>Pure CSS Tic Tac Toe</span></a></li>
    </ul>
</div>
</body>
</html>